<template>
  <div class="hexagon" :style="style"></div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const props = defineProps({
  size: {
    type: Number,
    required: true
  },
  color: {
    type: String,
    required: true
  }
})

const style = ref({
  "--hexagon-size": props.size + "px",
  "--hexagon-color": props.color
})
</script>

<style scoped lang="scss">
.hexagon {
  width: var(--hexagon-size);
  height: calc(var(--hexagon-size) * 0.55);
  position: relative;
  background-color: var(--hexagon-color);
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: calc(var(--hexagon-size) * 0.5) solid transparent;
  border-right: calc(var(--hexagon-size) * 0.5) solid transparent;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: calc(var(--hexagon-size) * 0.275) solid var(--hexagon-color);
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: calc(var(--hexagon-size) * 0.275) solid var(--hexagon-color);
}
</style>
